<template>

  <div class="homeDetail">

    <div class="header">
       <van-nav-bar
        class="title"
        title="创建工单"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="form-container">
       <van-form @submit="onSubmit" label-width="100%" label-align="top"
        > <van-cell-group
          > <van-field
            v-model="state.fromData.teamName"
            name="teamId"
            label="选择班组"
            placeholder="请选择班组"
            is-link
            readonly
            @click="state.showPicker2 = true"
          /> <van-popup
            v-model:show="state.showPicker2"
            destroy-on-close
            position="bottom"
            > <van-picker
              :columns="state.classList"
              @confirm="onConfirmLeader"
              @cancel="state.showPicker2 = false"
            /> </van-popup
          > <van-field
            v-model="state.fromData.describe"
            name="describe"
            label="工单描述"
            placeholder="请输入工单描述"
          /> <van-field
            v-model="state.fromData.bz"
            name="bz"
            label="备注"
            placeholder="请输入备注"
          /> </van-cell-group
        >
        <div class="newList" @click="cardClick">

          <div class="title">处置事项:</div>

          <div
            class="list"
            v-for="(item, index) in state.matterList"
            :key="index"
          >

            <div class="left"> {{ item.title }} </div>
             <van-switch
              active-color="#00b01b"
              v-model="item.value"
              :active-value="'1'"
              :inactive-value="'0'"
              class="switch"
            /> <!-- <div
              class="state"
              :style="{
                color: item.value ? '#fff' : '#333',
              }"
            >
              {{ item.value == "1" ? "已完成" : "未完成" }}
            </div> -->
            <div class="placeholder">点击确认事项</div>

          </div>

        </div>
         </van-form
      >
    </div>

    <div class="detailFoot">
       <van-button style="flex: 1" type="success" @click="handleReady"
        >创建工单</van-button
      >
    </div>

  </div>

</template>

<script setup>
  import { reactive, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { getPlanManageByPointId, setWorkSave } from '@/api/eventTask'
  import { showSuccessToast, showFailToast } from 'vant'
  const route = useRoute()
  const router = useRouter()
  const state = reactive({
    checked: false,
    fromData: {},
    matterList: [
      {
        title: '清理（打开）雨水箅子、雨水边沟等收水设施',
        value: '0',
        key: '1',
      },
      {
        title: '打开雨水窨井盖强排，并安装防护围栏确保安全',
        value: '0',
        key: '2',
      },
      {
        title: '检查雨水泵站',
        value: '0',
        key: '3',
      },
      {
        title: '安装挡水板或沙袋',
        value: '0',
        key: '4',
      },
      {
        title: '使用吸污疏通车开展管道清淤',
        value: '0',
        key: '5',
      },
      {
        title: '清理排水通道',
        value: '0',
        key: '6',
      },
      {
        title: '截断河水倒灌通道',
        value: '0',
        key: '7',
      },
      {
        title: '启用调蓄设施',
        value: '0',
        key: '8',
      },
      {
        title: '道路积水达到一定深度时，协调（公安部门）实施交通熔断',
        value: '0',
        key: '9',
      },
      {
        title:
          '根据实际情况及时增派力量或协调应急、消防、市级队伍等应急力量增援',
        value: '0',
        key: '10',
      },
    ],
    classList: [],
    teamList: [],
  })
  //返回
  const onClickLeft = () => history.back()

  // 获取工单数据
  const localItem = localStorage.getItem('orderDetail')
  const orderDetail = localItem ? JSON.parse(localItem) : null

  // 班组列表

  // 创建工单
  const handleReady = async () => {
    let matterKeys = []
    state.matterList.forEach((item) => {
      if (item.value === '1') {
        matterKeys.push(item.key)
      }
    })
    state.fromData.disposalMatter = matterKeys.join(',')

    orderDetail.riskPointAddress = orderDetail.positionDesc || ''
    console.log('打印字段', state.fromData)
    console.log('打印工单字段', orderDetail)

    if (orderDetail) {
      localStorage.removeItem('orderDetail')
    }

    setWorkSave({ ...orderDetail, ...state.fromData })
      .then(({ data }) => {
        if (data.code == 200) {
          showSuccessToast('提交成功')
          history.back()
        } else {
          showFailToast('创建工单失败')
        }
      })
      .catch((err) => {})
  }

  // 班组下拉选择
  const onConfirmLeader = ({ selectedValues, selectedOptions }) => {
    state.fromData.teamId = selectedOptions[0]?.value
    state.fromData.teamName = selectedOptions[0]?.text
    //   pickerValue.value = selectedValues;
    const selectTeams = state.teamList.filter(
      (item) => item.id == selectedOptions[0]?.value,
    )
    console.log('打印选择的班组', selectTeams[0])
    state.fromData.teamGroupId = selectTeams[0].userId
    state.fromData.teamGroupName = selectTeams[0].userName
    state.fromData.teamGroupPhone = selectTeams[0].phone

    state.showPicker2 = false
  }

  onMounted(() => {
    state.fromData.taskId = route.query.id
    getPlanManageByPointId({
      id: route.query.riskPointId,
      level: route.query.level,
    }).then(({ data }) => {
      if (data && data.code === 200) {
        let disposalMatter =
          data.data?.rePlanDetailsConfiguration?.disposalMatter?.split(',')
        disposalMatter?.forEach((item) => {
          state.matterList.forEach((item1) => {
            if (item1.key === item) {
              item1.value = '1'
            }
          })
        })
        if (data.data.reEmergencyClassList) {
          // state.teamList.length = 0
          state.teamList = [...data.data.reEmergencyClassList]
        }

        state.classList = data.data?.reEmergencyClassList?.map((item) => {
          return {
            text: item.name,
            value: item.id,
          }
        })
      }
    })
  })
</script>

<style lang="less" scoped>
  .homeDetail {
  height: 100vh;
  background: #f7f8f7;
  // padding: 0 6px;
  .header {
    // height: 100px;
    background: #ffffff;
    text-align: center;
    // padding-top: 34px;
    .title {
      font-family: PingFang TC, PingFang TC;
      font-weight: 600;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.9);
      // margin-bottom: 20px;
      // border: 1px red solid;
    }
  }
}
.newList {
  background: #fff;
  padding-bottom: 1px;
  // margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  .title {
    font-size: 14px;
    margin-left: 5px;
    margin-bottom: 10px;
  }
  .list {
    width: 100%;
    background-color: rgba(242, 242, 242, 1);
    margin-bottom: 5px;
    padding: 8px 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    position: relative;
    &:last-child {
      margin-bottom: 0;
    }
    .left {
      color: #333;
    }
    .switch {
      margin-top: 10px;
      position: relative;
    }

    .state {
      position: absolute;
      left: 50px;
      bottom: 18px;

      color: #333;
    }

    .placeholder {
      position: absolute;
      left: 40%;
      bottom: 18px;
      color: #c5c5c5;
    }
  }
}

.form-container {
  height: calc(100vh - 160px);
  margin: 10px 0;
  overflow-y: auto;
  background: #fff;
}
.van-stepper {
  width: 100%;
}
::v-deep .van-stepper__input {
  width: calc(100% - 28px - 28px - 4px) !important;
}

.disabled {
  width: 100%;
  border: none;
  background: #f2f3f5;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.van-button--small {
  width: 100%;
}
.newList {
  --van-switch-width: calc(100vw - 50px);
}
</style>

